<template>
  <page-header-wrapper>
    <page-tab-list></page-tab-list>

    <a-card :border="false">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 3 }" :wrapper-col="{ span: 8 }">
        <p class="title">店铺分销</p>
        <a-form-model-item label="权限获取条件" prop="shopDistribution.condition.free">
          <a-radio-group disabled v-model="form.shopDistribution.condition.free">
            <a-radio :value="1">免费使用</a-radio>
            <a-radio :value="0">消费获得</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          v-if="form.shopDistribution.condition.free !== 1"
          label="消费"
          prop="shopDistribution.condition.consume"
        >
          <div class="module-flex">
            <a-input-number disabled class="flex" v-model="form.shopDistribution.condition.consume" :min="0" />
            <div class="solt">元</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="权益内容">
          <a-textarea v-model="form.shopDistribution.content" placeholder="" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="使用说明">
          <a-textarea v-model="form.shopDistribution.remark" placeholder="" allow-clear />
        </a-form-model-item>
        <a-divider />

        <p class="title">联盟分销</p>
        <a-form-model-item label="权限获取条件" prop="allianceDistribution.condition.free">
          <a-radio-group v-model="form.allianceDistribution.condition.free">
            <a-radio :value="1">免费使用</a-radio>
            <a-radio :value="0">消费获得</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          v-if="form.allianceDistribution.condition.free !== 1"
          label="消费"
          prop="allianceDistribution.condition.consume"
        >
          <div class="module-flex">
            <a-input-number class="flex" v-model="form.allianceDistribution.condition.consume" :min="0" />
            <div class="solt">元</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="权益内容">
          <a-textarea v-model="form.allianceDistribution.content" placeholder="" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="使用说明">
          <a-textarea v-model="form.allianceDistribution.remark" placeholder="" allow-clear />
        </a-form-model-item>
        <a-divider />

        <p class="title">店铺推荐人</p>
        <a-form-model-item label="权限获取条件" prop="shopReferrer.condition.free">
          <a-radio-group v-model="form.shopReferrer.condition.free">
            <a-radio :value="1">免费使用</a-radio>
            <a-radio :value="0">消费获得</a-radio>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item
          label="消费"
          v-if="form.shopReferrer.condition.free !== 1"
          prop="shopReferrer.condition.consume"
        >
          <div class="module-flex">
            <a-input-number class="flex" v-model="form.shopReferrer.condition.consume" :min="0" />
            <div class="solt">元</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="权益内容">
          <a-textarea v-model="form.shopReferrer.content" placeholder="" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="使用说明">
          <a-textarea v-model="form.shopReferrer.remark" placeholder="" allow-clear />
        </a-form-model-item>
        <a-divider />

        <p class="title">消费返利</p>
        <a-form-model-item label="权限获取条件" prop="consumerRebate.condition.free">
          <a-radio-group v-model="form.consumerRebate.condition.free">
            <a-radio :value="1">免费使用</a-radio>
            <a-radio :value="0">消费获得</a-radio>
          </a-radio-group>
        </a-form-model-item>

        <a-form-model-item
          label="消费"
          v-if="form.consumerRebate.condition.free !== 1"
          prop="shopReferrer.consumerRebate.consume"
        >
          <div class="module-flex">
            <a-input-number class="flex" v-model="form.consumerRebate.condition.consume" :min="0" />
            <div class="solt">元</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="权益内容">
          <a-textarea v-model="form.consumerRebate.content" placeholder="" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="使用说明">
          <a-textarea v-model="form.consumerRebate.remark" placeholder="" allow-clear />
        </a-form-model-item>
        <a-divider />

        <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="submitForm" :loading="modalLoading">保存</a-button>
          <a-button style="margin-left: 10px" @click="$router.back(-1)">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { rightConf, getRightConf } from '@/api/saas/right'

export default {
  data() {
    return {
      form: {
        shopDistribution: {
          condition: {
            free: 1,
            consume: 0
          },
          content: '',
          remark: ''
        },
        allianceDistribution: {
          condition: {
            free: 1,
            consume: 0
          },
          content: '',
          remark: ''
        },
        shopReferrer: {
          condition: {
            free: 1,
            consume: 0
          },
          content: '',
          remark: ''
        },
        consumerRebate: {
          condition: {
            free: 1,
            consume: 0
          },
          content: '',
          remark: ''
        }
      },

      rules: {
        'shopDistribution.condition.free': [{ required: true, message: '请选择', trigger: 'change' }],
        'shopDistribution.condition.consume': [{ required: true, message: '请输入消费金额', trigger: 'blur' }],
        'allianceDistribution.condition.free': [{ required: true, message: '请选择', trigger: 'change' }],
        'allianceDistribution.condition.consume': [{ required: true, message: '请输入消费金额', trigger: 'blur' }],
        'shopReferrer.condition.free': [{ required: true, message: '请选择', trigger: 'change' }],
        'shopReferrer.condition.consume': [{ required: true, message: '请输入消费金额', trigger: 'blur' }],
        'consumerRebate.condition.free': [{ required: true, message: '请选择', trigger: 'change' }],
        'consumerRebate.condition.consume': [{ required: true, message: '请输入消费金额', trigger: 'blur' }]
      },
      modalLoading: false
    }
  },

  methods: {
    // 表单提交
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.modalLoading = true

          rightConf({
            conf: this.form
          })
            .then(res => {
              this.modalLoading = false

              if (res.code !== 0) {
                this.$error({
                  content: res.msg
                })
              } else {
                this.$message.success(res.msg)
                this.visible = false
              }
            })
            .catch(err => {
              this.$message.error(err.message)
              this.modalLoading = false
            })
        }
      })
    }
  },

  mounted() {
    getRightConf().then(res => {
      if (res.code === 0) {
        if (Array.isArray(res.data)) return

        this.form = res.data
      }
    })
  }
}
</script>

<style lang="less" scoped>
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
}

.module-flex {
  display: flex;

  .flex {
    flex: 1;
  }

  .solt {
    width: 42px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    background: #f7f7f7;
    border: 1px solid #d9d9d9;
    border-left: 0;
    border-radius: 0px 4px 4px 0px;
    text-align: center;
  }
}
</style>
